<template>
	<view v-if="vuex_isMobile" class="content-text-m">
		<view class="title">
			{{detailInfo.title}}
		</view>
		<rich-text class="content-text-content" :nodes="detailInfo.content"></rich-text>
	</view>
	<view v-else class="content-text">
		<view class="title">
			{{detailInfo.title}}
		</view>
		<rich-text class="content-text-content" :nodes="detailInfo.content"></rich-text>
	</view>
</template>

<script>
	import {
		getContentText,
	} from "@/common/api.js";
	export default {
		data() {
			return {
				detailInfo: {}
			}
		},
		props: {
			menuId: {
				type: Number,
				default: 0
			}
		},
		onLoad() {

		},

		methods: {
			getInfo(id) {
				getContentText({
					menuId: id
				}).then(res => {
					this.detailInfo = res.data || {}
					const regex = new RegExp('<img', 'gi');
					this.detailInfo.content = this.detailInfo.content.replace(regex,
						`<img style="max-width: 100%;"`)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-text-m {
		padding: 0 72px;

		.title {
			width: 100%;
			font-weight: 500;
			text-align: center;
			line-height: 105px;
			font-size: 72px;
			padding-top: 72rpx;
			color: #193F93;
		}

		.content-text-content {
			word-break: break-all;
			white-space: pre-warp;
		}
	}

	.content-text {
		.title {
			width: 100%;
			font-weight: 500;
			text-align: center;
			line-height: 80px;
			font-size: 24px;
			color: $maincolor;
		}

		.content-text-content {
			word-break: break-all;
			white-space: pre-warp;
		}
	}
</style>